<template>
	<!-- height:calc(100vh - 60px); -->
	<view v-if="aiList[0]" class="music-suno" ref="uv-back-top" style="transition: width 2s;">
		<uv-form labelPosition="left" :model="suno" :rules="rules" ref="form">
			<uv-form-item labelWidth="80" label="模型" prop="suno.name" borderBottom>
				<uni-data-select v-model="suno.mv" :localdata="aiList[aicurrent].model"></uni-data-select>
			</uv-form-item>

			<!-- <view style="font-size: 14px;">图片比例</view>
			<uv-form-item labelWidth="80" label="" prop="suno.aspectRatio" borderBottom>
				<view class="imgrate">
					<view v-for="(item,index) in ratioSize" :key="item.text"
						:class="suno['aspectRatio'] == item.value?'item_ss cursor-pointer item_ss_acting':'item_ss cursor-pointer'"
						@click="suno['aspectRatio'] = item.value">
						<view style="height: 70%;display: flex;justify-content: center;align-items: center;">
							<view class="item_xx" :style="[{
								width: $uv.addUnit(clacRate(item)[0]),
									height: $uv.addUnit(clacRate(item)[1])
								}]">
							</view>
						</view>
						<view class="item_text">
							{{item.text}}
						</view>
					</view>
				</view>
			</uv-form-item> -->
			<uv-form-item labelWidth="80" label="" prop="suno.instrumental" borderBottom>
				<view style="display: flex;justify-content: space-between;width: 100%;">
					<view>纯音乐</view> <uv-switch v-model="suno.instrumental"></uv-switch>
				</view>
			</uv-form-item>
			<uv-form-item labelWidth="80" label="" prop="suno.generateVideo" borderBottom>
				<view style="display: flex;justify-content: space-between;width: 100%;">
					<view>同时生成视频</view> <uv-switch v-model="suno.generateVideo"></uv-switch>
				</view>
			</uv-form-item>
			<uv-form-item labelWidth="110" label="" prop="suno.custom" borderBottom>
				<view style="display: flex;justify-content: space-between;width: 100%;">
					<view>歌词和风格标签</view> <uv-switch v-model="suno.custom"></uv-switch>
				</view>
			</uv-form-item>
			<view class="demo-input-suffix" style="margin-top: 10px;">
				<view style="font-size: 14px;">歌曲名称：</view>
				<uv-form-item labelWidth="110" label="" prop="suno.title" borderBottom>
					<el-input @focus="$emit('focus')" style="margin-top: 5px;" placeholder="歌曲名称比如:假期" type="text"
						v-model="suno.title">
					</el-input>
				</uv-form-item>
			</view>
			<view v-if="suno.custom">
				<view class="demo-input-suffix" style="margin-top: 10px;">
					<view style="font-size: 14px;">歌词：</view>
					<el-input :disabled="suno.instrumental" style="margin-top: 5px;" placeholder="歌词:有一定的格式"
						type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="suno.prompt">
					</el-input>
				</view>
				<view class="demo-input-suffix" style="margin-top: 10px;">
					<view style="font-size: 14px;">风格标签：</view>
					<el-input style="margin-top: 5px;"
						placeholder="风格标签 比如:流行音乐,摇滚,‌嘻哈,电子音乐,古典音乐,‌爵士乐,traditional, acoustic, melodic" type="textarea"
						:maxlength="filterString(suno.mv)<4?200:3000" :autosize="{ minRows: 2, maxRows: 4}"
						v-model="suno.tags">
					</el-input>
				</view>
				<view class="demo-input-suffix" style="margin-top: 10px;">
					<view style="font-size: 14px;">不希望生成的风格标签：</view>
					<el-input style="margin-top: 5px;" placeholder="风格标签 比如:traditional, acoustic, melodic"
						type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="suno.negative_tags"
						maxlength="200">
					</el-input>
				</view>
				<view class="demo-input-suffix" style="margin-top: 10px;">
					<view style="font-size: 14px;">音频风格：</view>
					<el-slider v-model="style_weight" :format-tooltip="formatTooltip"
						@change="changeSlider('style_weight')"></el-slider>
				</view>
				<view class="demo-input-suffix" style="margin-top: 10px;">
					<view style="font-size: 14px;">音频奇妙度：</view>
					<el-slider v-model="weirdness_constraint" :format-tooltip="formatTooltip"
						@change="changeSlider('weirdness_constraint')"></el-slider>
				</view>
			</view>
			<view v-else class="demo-input-suffix" style="margin-top: 10px;">
				<view style="font-size: 14px;">灵感描述：</view>
				<el-input style="margin-top: 5px;" placeholder="歌曲描述 比如:关于假期的原声流行音乐" type="textarea"
					:autosize="{ minRows: 2, maxRows: 4}" v-model="suno.gpt_description_prompt">
				</el-input>
			</view>
			<el-link style="font-size: 12px;opacity: 0;height: 0px !important;" type="primary">{{fill}}</el-link>
			<view style="display: flex;justify-content: space-between;margin-bottom: 10px;">
				<uv-button :disabled="disabled" style="width: 49%;" type="primary" text="提 交"
					@click="submit"></uv-button>
				<uv-button style="width: 49%;" type="error" text="清 空" @click="reset"></uv-button>
			</view>
		</uv-form>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar';
	import {
		task,
		index,
		taskId,
		getScroll,
		scroll,
	} from '@/common/api.js';
	import uploads from '@/components/upload/upload.vue';
	import config from '@/common/config'
	export default {
		components: {
			// 注册组件
			uploads
		},
		props: {
			minWidth: {
				type: [Number, String],
				default: 1
			},
			aside: {
				type: Boolean,
				default: false
			},
			deepColor: {
				type: String,
				default: '#4D4D4D'
			},
			shallowColor: {
				type: String,
				default: '#808080'
			},
			lightColor: {
				type: String,
				default: '#ccc'
			},
			aicurrent: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: 'suno'
			},
			taskInfo: Object,
		},
		data() {
			return {
				fill: config.fill,
				tabbarsValue: 'music',
				scrollTop: 0,
				isFirstLoad: true, // 标志变量，用于判断是否首次加载
				id: '',
				createdAt: '',

				disabled: false,
				ratioSize: [{
					text: '9:16',
					value: '9:16',
				}, {
					text: '3:4',
					value: '3:4',
				}, {
					text: '1:1',
					value: '1:1',
				}, {
					text: '4:3',
					value: '4:3',
				}, {
					text: '16:9',
					value: '16:9',
				}, {
					text: '21:9',
					value: '21:9',
				}],
				suno: {},
				style_weight: 0,
				weirdness_constraint: 0,
				dataLoaded: false,
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		watch: {
			// 监听data数据的变化
			suno: {
				handler: function(newVal, oldVal) {
					this['config_' + this.tabbarsValue][this.type] = newVal
					this.$uv.vuex('config_' + this.tabbarsValue, this['config_' + this.tabbarsValue]);
				},
				deep: true
			},
			aicurrent: {
				handler: function(newVal, oldVal) {
					this.suno['ai'] = this.aiList[newVal].value;
				},
				deep: true
			},
			taskInfo: {
				handler(newVal) {
					this.reset();
					this.suno = newVal;
				},
				immediate: true
			},
			value4: {
				handler(newVal) {
					// console.log(newVal);
				},
				immediate: true
			},
		},
		mounted() {
			this.tabbarsValue = this.pages();
			this.reset();
			if (JSON.stringify(this.taskInfo) != "{}") {
				this.suno = this.taskInfo;
			}
		},
		methods: {
			filterString(str) {
				// return str.match(/[0-9]+/)[0]; 
				return str.match(/[\d.]+/g)[0];
			},
			changeSlider(e) {
				this.suno[e] = this[e] / 100;
				console.log(this.suno);
			},
			formatTooltip(val) {
				return val / 100;
			},
			clacRate(e) {
				let w = e.text.split(':')[0];
				let h = e.text.split(':')[1];
				if (w * 11 < 20 || h * 11 < 20) {
					w = w * 25;
					h = h * 25;
				} else if (w * 6 < 20 || h * 6 < 20) {
					w = w * 8;
					h = h * 8;
				} else if (w * 4 < 20 || h * 4 < 20) {
					w = w * 7;
					h = h * 7;
				} else if (w * 1.5 < 20 || w * 1.5 < 20) {
					w = w * 2.5;
					h = h * 2.5;
				} else {
					w = w * 2;
					h = h * 2;
				}
				return [w, h];
			},
			submit() {
				var that = this;
				if (this.suno && (this.suno.prompt || this.suno.gpt_description_prompt)) {
					this.disabled = true;
					this.$emit('focus');
					this.$emit('suno', this.suno);
					setTimeout(function() {
						that.disabled = false;
					}, 3000)
				} else {
					this.$refs.toast.show({
						type: 'error',
						message: "创意描述为空！"
					})
				}
			},
			reset() {
				this.suno = {
					mv: "chirp-v4",
					custom: false,
					instrumental: false,
					generateVideo: false,
					gpt_description_prompt: "",
					prompt: "",
					title: "",
					tags: "",
					music_id: "",
					continue_at: 10,
					negative_tags: ""
				};
			},
			formatValue(val, name) {
				this.suno[name] = val / 100;
				return val / 100;
			},
			pages() {
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				return currentPage.split('/')[2];
			},
			async record() {
				await scroll({
					content: this['vuex_' + this.tabbarsValue],
					type: this.tabbarsValue
				}, {
					custom: {
						auth: true,
						toast: false,
					},
				})
			},
			cTime(time1, data, index) {
				if (index == 0) {
					return true;
				}
				// console.log(" ” " + Number(data.length - 1));
				if (index == Number(data.length - 1)) {
					return false;
				}
				var time2 = data[index + 1] && data[index + 1].createdAt;
				if (!time1 || !time2) {
					return false;
				}
				// console.log(time1 + " 《=》 " + time2);
				// 将时间转换为Date对象
				var date1 = new Date(time1).getTime();
				var date2 = new Date(time2).getTime();
				// 计算时间差（毫秒）
				var difference = Math.abs(date2 - date1);
				// 将时间差转换为分钟
				var minutes = Math.ceil(difference / (1000 * 60)); // 向上取整
				if (minutes > 20) {
					return true;
				} else {
					return false;
				}
			},
			times(time) {
				return " -- " + uni.$uv.timeFrom(new Date(time).getTime()) + " -- ";
			},
			routes(url) {
				this.routed('/pages' + url);
			},
			routed(url) {
				console.log('routed', url)
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/uni_modules/uv-ui-tools/index.scss";

	.music-suno {
		height: 100%;

		.imgrate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;

			.item_ss {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				border: 1px solid #cccccc;
				border-radius: 5px;
				width: 60px;
				height: 70px;
				color: #666666;
				margin-bottom: 5px;

				.item_xx {
					background: linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left top no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left top no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right top no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right top no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left bottom no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left bottom no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right bottom no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right bottom no-repeat;
					background-size: 2px 6px, 6px 2px, 2px 6px, 6px 2px;
					// background-color: #d0e2f5;
					margin-top: 0px;
					background-color: #cccccc;
					border: 1px solid #fff;
				}

				.item_text {
					height: 30%;
					padding: 2px 5px;
					bottom: 0px;
				}
			}

			.item_ss_acting {
				border: 1px solid #C6000B;

				.item_xx {
					background-color: #C6000B;
					border: 1px solid #fdff7b;
				}

				.item_text {
					color: #C6000B;
				}
			}
		}
	}
</style>